<template>
  <div>
    <Upload ref="upload" :action="baseUrl + url" v-show="!img" type="drag" :headers='{"token": $store.state.token}'
      :show-file-list="false" :show-upload-list="true" :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload">
      <div style="padding: 40px 0">
        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
        <p>点击或拖拽上传</p>
      </div>
    </Upload>
    <div class="img" v-show="img" @mouseover="mouseover" @mouseleave="mouseleave">
      <img :src="img" />
      <div class="top" v-show="imgShow" @click="modal = true">
        <i class="iconfont icon-icon7"></i>
      </div>
    </div>
    <Modal v-model="modal" :z-index="2500" title="提示" @on-ok="ok" @on-cancel="cancel">
      <p>确定要删除此图片吗？</p>

    </Modal>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        // qiniuData: {
        //   token: "",
        //   key: "",
        // },
        modal: false,
        img: "",
        imgShow: false,
        afterName: "",
      };
    },
    props: {
      imgUrl: String,
      clear: Boolean,
      url: {
        type: String,
        default: 'chongqing/stage/file/uploadImageFile'
      }
    },
    watch: {
      clear: function (data) {
        this.$refs.upload.clearFiles();
        this.img = "";
      },
      // imgUrl: function (data) {
      //   console.log(data);
      //   this.img = data;
      // },
      imgUrl: {
        handler(data) {
          this.img = data;
        },
        immediate: true
      }
    },

    methods: {
      mouseover() {
        this.imgShow = true;
      },
      mouseleave() {
        this.imgShow = false;
      },
      // 删除图片
      ok() {
        console.log('ok');
        this.img = "";
        this.$refs.upload.clearFiles();
        this.$emit("uploadImg", "");
      },
      cancel() {
        console.log('no');

      },
      delImg() {
        // this.$Modal.confirm({
        //   // Modal文档在哪儿
        //   title: "提示",
        //   content: "<p>确定要删除此图片吗？</p>",
        //   zIndex: 2500,
        //   onOk: () => {
        //   this.img = "";
        //   this.$refs.upload.clearFiles();
        //   this.$emit("uploadImg", "");
        //   },
        //   onCancel: () => {  },
        // });
      },
      // 获取上传文件的前缀
      // getFilePrefix(afterName) {
      //   return new Promise((resolve, reject) => {
      //     this.$http(
      //       "/stage/file/getFilePrefix",
      //       {
      //         // museumId: this.$store.state.museumId,
      //         suffix: afterName,
      //       },
      //       "get",
      //       (res) => {
      //         if (res.data.code == 200) {
      //           this.qiniuData.key = res.data.data;
      //           this.$http(
      //             "/stage/file/getAccessToken",
      //             {},
      //             "get",
      //             (response) => {
      //               if (res.data.code == 200) {
      //                 this.qiniuData.token = response.data.data;
      //                 resolve();
      //               } else {
      //                 this.$Message.error(response.data.msg);
      //                 reject();
      //               }
      //             }
      //           );
      //         } else {
      //           this.$Message.error(res.data.msg);
      //           reject();
      //         }
      //       }
      //     );
      //   });
      // },
      // 上传验证
      beforeAvatarUpload(file) {
        console.log(file);
        return new Promise((resolve, reject) => {
          const isLt2M = file.size / 1024 / 1024 < 1;
          if (!isLt2M) {
            this.$Message.error("上传图片大小不能超过 200K!");
            reject();
          } else {
            resolve();
          }

          // var fileName = file.name;
          // var n = fileName.lastIndexOf(".");
          // var n1 = fileName.substr(n);
          // this.getFilePrefix(n1)
          //   .then(() => {
          //     resolve();
          //   })
          //   .catch(() => {
          //     reject();
          //   });
        });
      },
      // 上传完毕
      handleAvatarSuccess(res, file) {
        console.log(res)
        console.log("w*****************************");
        this.img = res.data;
        this.$emit("uploadImg", res.data);
      },
    },
  };

</script>

<style scoped>
  .img {
    width: 100%;
    position: relative;
    cursor: pointer;
    z-index: 999;
  }

  .img img {
    position: relative;
    width: 100%;
    height: 100%;
    margin-bottom: -10px;
  }

  .top {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    background-color: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .top i {
    font-size: 34px;
    color: white;
  }

  .top i:hover {
    opacity: 0.8;
  }

</style>
